<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="mine" uri="http://mywebsite.com/tags/wpsj" %>
<%@ taglib prefix="conv" uri="http://cscfresher.com/jsp/tlds/mytags" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>File Management</title>
	<script>
	$(document).ready(function () {
	    $('#selall').click(function () {
	        $('.selectedId').prop('checked', this.checked);
	    });

	    $('.selectedId').change(function () {
	        var check = ($('.selectedId').filter(":checked").length == $('.selectedId').length);
	        $('#selall').prop("checked", check);
	    });
	});
	</script>
</head>
<body>
<%-- <mine:userProfiles1 user="${user}"/> --%>	<div style="width: 1000px; height: 50px;text-align: right;"><p>Welcome <b>${user.userName}</b>, &nbsp;<a href="logout">Logout</a></div>
<div style="width: 1000px">
	<div style="float: left;width:200px;text-align: left;">
		<div>
			<fieldset style="height: 200px;background: #EFEDFC">
				<legend style="color: graytext;font-weight: bold;">Common Information</legend>
				<p style="font-size: 14">Capacity:<fmt:formatNumber type="percent" maxIntegerDigits="2" value="${capacity}" maxFractionDigits="2" /> in use</p>
				<div id="numOfOnline">Currently online: ${numOfOnline } </div>	
			
			</fieldset>
		</div>
		<div>
			<fieldset style="height: 200px;background: #EFEDFC">
				<legend style="color: graytext;font-weight: bold;">User Profiles</legend>
				<p style="font-size: 14">${user.lastName } ${user.firstName }</p>
				<p style="font-size: 14">${user.cellphone }</p>
				<p style="font-size: 14">${user.emailAddress }</p>
				<br />
				<p style="font-size: 14;text-align: right"><a href="ViewUsers">Edit Profiles</a></p>
			</fieldset>
		</div>
	</div>
	
	<div style="float: left;width:800px;">
		<fieldset style="min-height:500px;">
			<legend style="color: graytext;font-weight: bold;">Files Uploaded</legend>
			<br />
			<div>
				<form action="file-upload-action?type=user&folder=${currentFolder}" enctype="multipart/form-data"  id="uploadForm" method="post">
					<input type="file" name="file" id="file">
				</form>
			</div>
			<div style="border-bottom: 1px; border-bottom-style: solid;">
				<input type="button" name="upload" value="Upload" onclick="submitFormUpload()">
				<input type="button" name="delete" value="Delete" onclick="deleteFile()">
				<input type="button" name="download" value="Download" onclick="downloadFile()" >
				<input type="button" name="createfolder" value="Create folder" onclick="showPopupCreateFolder()">
			</div>
			<div>
				<p style="font-size: 14">
					<a href="<c:url value="/file-management"/>" >Upload Folder</a>
					<c:forEach items="${navi}" var="row">
						/<a href='<c:url value="/file-management?folder=${row.path}"/>'>${row.name}</a>
					</c:forEach>
				</p>
				<form action=""  method="post" id="formManageFile" name="formManageFile">
				<input type="hidden"  name="currentFolder" value="${currentFolder}"  />
				<table style="font-size: 13">
					<tr align="left">
						<th><input type="checkbox" id="selall"></th>
						<th width="450px;">File Name</th>
						<th width="100px;">Kind</th>
						<th width="100px;">Size</th>
						<th width="150px;">Modified</th>
					</tr>
					<c:forEach items="${files}" var="file">
						<tr align="left">
							<td><input type="checkbox" name="filename" value="${file.name}" class="selectedId"></td>
							<c:choose>
								<c:when test="${file.isDirectory()}">
									<td><a href="<c:url value="/file-management?folder=${currentFolder}${file.name}" />">${file.name}</a></td>
									<td>Folder</td>
								</c:when>
								<c:otherwise>
									<td><a href="#">${file.name}</a></td>
									<td>File</td>
								</c:otherwise>
							</c:choose>
							
							<td><conv:convert value="${file.length()}" /> </td>
							<jsp:useBean id="dateValue" class="java.util.Date" />
							<jsp:setProperty name="dateValue" property="time" value="${file.lastModified()}" />
							<td><fmt:formatDate value="${dateValue}" pattern="MM/dd/yyyy HH:mm a" /></td>
						</tr>
					</c:forEach>
				</table>
				</form>
			</div>
		</fieldset>
	</div>
</div>
</body>
<script type="text/javascript">
function submitFormUpload(){
	if(document.getElementById("file").value != ''){
		document.getElementById("uploadForm").submit();	
	}else{
		alert("Please choose file to upload");
	}
}

function showPopupCreateFolder()
{
	var name=prompt("Please enter folder's name",'');
	if (name!=null)
  	{
		$.post(
				"create-folder",
				{name : name, currentFolder : window.location.search.replace( '?', '' ).replace('folder=', '')},
				function(data){
					if(data == 1){
						location.reload();
						return false;
					}
					else{
						alert("Something went wrong. Please try again later");
					}
					//alert(data);
				}
			);

		
		
		//createFolder(name, window.location.search.replace( '?', '' ).replace('folder=', ''));
		//location.reload();
		
  	}
}

function deleteFile(){
	document.formManageFile.action ="delete-file";
	document.formManageFile.submit();
}

function downloadFile(){
	document.formManageFile.action ="zip-files-download";
	document.formManageFile.submit();
}
</script>
</html>